<template>
  <div>
    <el-dialog title="新增设备" :visible="visible" :before-close="close" >
  <el-form ref="form" label-width="120px" size="mini" :rules='rules' :model='form'>

      
  <el-form-item label="设备编号：">
     <span>系统自动生成</span>
  </el-form-item>


  <el-form-item label="选择型号：" prop="userName">
    <el-select  placeholder="请选择" style="width:80%" v-model='form.userName' >
      <!-- xzxhlist -->
     <el-option 
      v-for="item in shjlxllist" :key="item.id"
      :label="item.name" :value="item.name"
     ></el-option>
    </el-select>
  </el-form-item>

 <el-form-item label="选择点位：" prop="desc">
    <el-select  placeholder="请选择" style="width:80%" v-model='form.desc' >
      <!-- 渲染 -->
      <el-option 
      v-for="item in xzdwlist" :key="item.id"
      :label="item.node.name" :value="item.node.name"
     ></el-option>
    </el-select>
  </el-form-item>
  
</el-form>

  <div slot="footer" class="dialog-footer">
    <el-button @click='close'>取 消</el-button>
    <el-button type="primary" @click='submit'>确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
import {gettype,creatorder,username} from '@/api/deviceManagement'

// 售货机类型列表(搜索) 
import {shjlxlbApi } from '@/api/deviceManagement'

export default {
  name: 'HrsaasAdd',
  props:{
    visible:{
      type:Boolean,
      default:true
    },
    // 渲染 点击新建 后 的选择型号
    shjlxllist:{
      default:()=>[]
    },
    // 渲染 点击新建 后 的选择点位
    xzdwlist:{
   default:()=>[]
    }
  },
  data() {
    return {
      form:{
        userName:'',
        desc:'',
      },
      type:[],

      rules:{
        userName:[
          {required:true,message:'请选择',trigger:'blur'}
        ],
        desc:[
          {required:true,message:'请输入',trigger:'blur'},
        ],
      },

      // 渲染点击 新建 后的型号
      xzxhlist : []
      
    };
  },

  // 监视form变淡数据的变化
 watch:{
    form(newVal){
      this.form.productType = newVal.productTypeId
      console.log(this.form.productType);
    }
  }, 

  mounted() {
    this.gettype()
    // this.username()

    //  售货机类型列表(搜索)  渲染点击 新建 后的型号
       this.shjlxlbAp() 
      
  },

  methods: {
    // 清空表格
    close(){
      this.$emit('update:visible',false)
      this.$refs.form.resetFields()
      this.form={}
      // console.log(this.form,'为什么清空不生效,生效啦');
    },

    // 点击提交
    async submit(){
      await this.$refs.form.validate()
      const res=await creatorder(this.form)
      // console.log(res,'新增成功了吗');
      this.$message.success('新增成功')
      this.close()
      // this.$emit('update:visible',false)
      this.$refs.form.reserFileds()
      this.form={}
      this.$parents.getList()
    },

    // 获取工单类型
  async gettype(){
  const res = await gettype()
  // console.log(res,'能获取工单类型吗');
  this.type=res
  // map返回一个新数组
  // this.type=res.map(ele=>ele.typeName)
  // console.log(this.type,'type是啥');
},

// // 获取运营人员
// async username(){
//   const res = await username()
//   console.log(res,'是运营人员的结果吗');
// }



//  售货机类型列表(搜索)  渲染点击 新建 后的型号
      async shjlxlbAp() {
      try {
        //  this.loading = true
        const res = await shjlxlbApi(this.params)
        console.log(res.currentPageRecords);
        this.xzxhlist = res.currentPageRecords
      } finally {
        //  this.loading = false
      }
    },


  },
};
</script>

<style lang="scss" scoped>
// .color{
//   background-color: #fff;
// }
</style>